<template>
  <div>
    <div class="oprate-icon-list">
      <div
          class="icon-container"
          v-for="(icon,index) in iconList"
          :key="'icon'+index"
      >
        <icon
            class="icon"
            :class="{active:index===0&&isLike}"
            :name="icon"
            :size="20"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Icon from "@/components/icon"

export default {
  name: "oprate-icon-list",
  components: { Icon },
  props:{
    isLike: Number
  },
  data() {
    return {
      iconList: ['like-d','comment-d','collect-d','report-d']
    }
  }
}
</script>

<style lang="less" scoped>
.oprate-icon-list {
  position: fixed;
  left: 100px;
  top: 200px;
  z-index: 999;
  .icon-container {
    background-color: #fff;
    .size(36px);
    .flex-center(center);
    border-radius: 50%;
    margin-bottom: 10px;
    cursor: pointer;

    &:hover {
      .icon {
        fill: #8a93a0;
      }
    }
  }
}
.icon {
  fill: #b2bac2;
}
.active{
  fill: #7fba56;
}
</style>